Estoy tratando de escribir una consulta de página para devolver una línea de texto y una imagen en un proyecto GatsbyJS. Estoy usando el complemento Gatsby Image junto con 'gatsby-transformer-sharp' y 'gatsby-plugin-sharp' y sigo recibiendo un error de que los nodos devueltos por la consulta no están definidos.
Mi consulta se ve así:
query ProjectsPage { allMarkdownRemark { nodes { frontmatter { featuredImg { childImageSharp { fluid{ ...GatsbyImageSharpFluid } } } title } } } }La línea de código que me da el error:
const projects = data.projects.nodes
Y mi archivo gatsby-config.js se ve así:
module.exports = { /* Your site config here */ plugins: [ 'gatsby-transformer-remark', 'gatsby-transformer-sharp', 'gatsby-plugin-sharp', { resolve: `gatsby-source-filesystem`, options: { name: `projects`, path: `${__dirname}/src/projects/`, }, }, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/`, }, }, ], siteMetadata: { title: 'example', description: 'web dev portfolio', copyright: 'example text' }, }Realmente agradecería cualquier ayuda en esto!
La forma correcta de obtener los nodos de su consulta es:
const projects = data.allMarkdownRemark.nodesSi desea filtrar sus resultados por directorio y solo obtener nodos dentro de los proyectos, puede seguir una de las respuestas aquí y usar algo como:
query ProjectsPage { allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(/projects/)/"}}) { nodes { frontmatter { featuredImg { childImageSharp { fluid { ...GatsbyImageSharpFluid } } } title } } } }